/*
 * 用户登录状态模块
 * 在整个应用中，各个组件可以通过 this.$store.state 来访问这些状态数据，从而根据状态的变化来更新组件的显示内容。
 * 
 * 1.state 是 Vuex 存储的核心部分，它类似于组件中的 data，用于存储应用的状态数据
 * 2.getters 类似于组件中的计算属性，它的作用是从 state 中派生出一些状态。在这个模块中，
 * 定义了两个 getter：getUser 用于获取 state 中的 user 属性；getShowLogin 用于获取 state 中的 showLogin 属性。
 * 3.mutations 是唯一可以修改 state 的地方，它是一个包含多个方法的对象，每个方法都接收 state 作为第一个参数，以及一个可选的 payload（即传递的数据）作为第二个参数。在这个模块中，定义了两个 mutation：setUser 用于更新 state 中的 user 属性；setShowLogin 用于更新 state 中的 showLogin 属性。
  作用：mutations 必须是同步的，因为这样才能保证状态变化的可追踪性。组件可以通过 this.$store.commit 来触发 mutation。例如，在组件中可以使用 this.$store.commit('setUser', newUser) 来更新用户信息。
  *4.actions 类似于 mutations，但 actions 可以包含异步操作，如发送网络请求等。actions 方法接收一个上下文对象作为第一个参数，这个上下文对象包含了与 store 实例相同的方法和属性，例如 commit 方法用于触发 mutation。在这个模块中，定义了两个 action：setUser 和 setShowLogin，它们分别调用对应的 mutation 来更新状态。
作用：当需要进行异步操作来更新状态时，就需要使用 actions。组件可以通过 this.$store.dispatch 来触发 action。例如，在组件中可以使用 this.$store.dispatch('setUser', newUser) 来间接更新用户信息。
 */
export default {
  state: {
    user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : "", // 从localStorage读取用户信息
    showLogin: false // 用于控制是否显示登录组件
  },
  getters: {
    getUser(state) {
      return state.user
    },
    getShowLogin(state) {
      return state.showLogin
    }
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      // 将用户信息保存到localStorage
      if (data) {
        localStorage.setItem('user', JSON.stringify(data));
      } else {
        localStorage.removeItem('user');
      }
    },
    setShowLogin(state, data) {
      state.showLogin = data;
    }
  },
  actions: {
    setUser({ commit }, data) {
      commit('setUser', data);
    },
    setShowLogin({ commit }, data) {
      commit('setShowLogin', data);
    }
  }
}